<template>
	<view class="container">
		<view class="bg-white">
			<view class="text-13 flex justify-between align-center padding">
				<view class="text-333 text-bold flex-sub">
					选择服务类型
				</view>
				<view class="flex justify-end align-center flex-twice" @click="showModal">
					<view class="text-767696 margin-right-xs">
						{{typeName}}
					</view>
					<image :src="baseUrl+'/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;">
					</image>
				</view>
			</view>
			<view class="text-13 flex justify-between align-center padding">
				<view class="text-333 text-bold flex-sub">
					标题
				</view>
				<input type="text" value="" v-model="title" class="flex-twice text-13" placeholder="在这里写下您的标题" />
			</view>
			<view class="text-13 flex justify-between align-center padding">
				<view class="text-333 text-bold flex-sub">
					封面
				</view>
			</view>
			<view class="cu-form-group padding-top">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in picList" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm">
			<view class='toolbar flex justify-between align-center padding solid-bottom' @tap="format">
				<view :class="formats.bold ? 'color' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
				<view :class="formats.italic ? 'color' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
				<view :class="formats.underline ? 'color' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
				<view :class="formats.strike ? 'color' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
				<view :class="formats.align === 'left' ? 'color' : ''" class="iconfont icon-zuoduiqi" data-name="align"
				 data-value="left"></view>
				<view :class="formats.align === 'center' ? 'color' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
				 data-value="center"></view>
				<view :class="formats.align === 'right' ? 'color' : ''" class="iconfont icon-youduiqi" data-name="align"
				 data-value="right"></view>
				<view class="iconfont icon-undo" @tap="undo"></view>
				<view class="iconfont icon-redo" @tap="redo"></view>
			
				<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
				<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
				<view class="iconfont icon-charutupian" @tap="insertImage"></view>
				<view class="iconfont icon-shanchu" @tap="clear"></view>
			
			</view>
			<editor id="editor" class="ql-container" placeholder="在这里写下您方案描述..." showImgSize showImgToolbar showImgResize
			 @statuschange="onStatusChange" @ready="onEditorReady" @blur="getEditor">
			</editor>
		</view>
		<view class="flex justify-start align-center padding text-sm">
			<view class="flex justify-start align-center" @click="changeType">
				<image v-if="is_agree" :src="baseUrl + '/static/selected.png'" mode=""
					style="width: 26rpx; height: 26rpx"></image>
				<image v-else :src="baseUrl + '/static/unselected.png'" mode="" style="width: 26rpx; height: 26rpx">
				</image>
				<text class="text-333 margin-left-xs">同意并认真阅读</text>
			</view>
			<text class="color" @click="toPage('/filePage/pages/protocol/protocol?title=佐佑帮信息发布协议&code=PROTOCOL_INFO_PUBLISH&type=4')">《佐佑帮信息发布协议》</text>
		</view>
		<button @click="submit" class="bg-color text-15 padding radius10 text-center text-white"
			style="margin: 48rpx 20rpx 20rpx">
			确认发布
		</button>
		<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''" @click="hideModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-between">
					<view class="action text-green"></view>
					<view class="text-221815 text-17"> 选择技工 </view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<scroll-view scroll-y="true" style="height: 200rpx">
					<view class="flex justify-between align-center padding solid-bottom" v-for="item in options" @click="cheacked(item)">
						<view class="flex justify-between align-center f-grow1">
								{{ item.name }}
						</view>
						<image v-if="typeId == item.id" :src="baseUrl + '/static/selected.png'" mode=""
							class="margin-left margin-right-sm" style="width: 26rpx; height: 26rpx"></image>
						<image v-else :src="baseUrl + '/static/unselected.png'" mode=""
							class="margin-left margin-right-sm" style="width: 26rpx; height: 26rpx"></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				typeId:'',
				typeName: '请选择服务类型',
				modalName:null,
				picList:[],
				options:[],
				editorCtx:'',
				is_agree:false,
				title:'',
				
			};
		},
		onLoad() {
			this.getTreeList()
		},
		methods:{
			toPage(url) {
				this.$util.openNewPage(url);
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			async getTreeList() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList, {
					type: 7
				})
				if (res) {
					this.options = res.data
					// console.log(res)
			
				}
			},
			showModal(){
				this.modalName = 'bottomModal'
			},
			hideModal(){
				this.modalName = null
			},
			cheacked(e) {
				this.hideModal();
				this.typeId = e.id;
				this.typeName = e.name;
			},
			DelImg(e) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.picList.splice(e.currentTarget.dataset.index, 1);
						}
					},
				});
			},
			async ChooseImage() {
				let that = this
				uni.chooseImage({
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res);
						res.tempFilePaths.forEach(item => {
							that.$upload(item).catch((req) => {
								// console.log(req);
								that.picList.push(req.data);
							});
						})
			
					},
				});
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			
			},
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			getEditor(e){
				console.log(e.detail.html)
				this.detailHtml = e.detail.html
			},
			changeType() {
				this.is_agree = !this.is_agree
			},
			async submit() {
				if (!this.is_agree) {
					this.$util.msg("未同意发布协议");
					return;
				}
				if (
					!this.typeId ||
					!this.title ||
					!this.detailHtml ||
					this.picList.length == 0
				) {
					this.$util.msg("请完善信息");
					return;
				}
				uni.showLoading({
					title: '正在发布',
					mask: true
				});
				const [err, res] = await this.$post(this.$api.training_create, {
					typeId: this.typeId,
					typeName: this.typeName,
					title:this.title,
					detailHtml:this.detailHtml,
					coverImg:this.picList.join(','),
					
				});
				if (res) {
					console.log(res);
					
			        uni.hideLoading();
					this.$util.msg(res.message);
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
					// console.log(res)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./editor-icon.css";
	
.ql-container {
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		width: 100%;
		font-size: 32rpx;
		line-height: 1.5;
	}
</style>
